<template>
    <div class="flex_col_start m5 p10 card" style="width: 400px;">
        <div class="flex_row_center">
            <label>ID:</label>
            <label class="ml5">{{ props.firmFile.id }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>名称:</label>
            <label class="ml5">{{ props.firmFile.name }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>版本:</label>
            <label class="ml5">{{ props.firmFile.version }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>大小:</label>
            <label class="ml5">{{ formatSize(props.firmFile.size) }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>创建时间:</label>
            <label class="ml5">{{ formatDate(props.firmFile.create_timestamp) }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>描述:</label>
            <label class="ml5">{{ props.firmFile.description }}</label>
        </div>
        <div class="flex_row_center mt5">
            <el-button @click="onClickDelete" type="warning">删除</el-button>
            <el-button @click="onClickDownload" type="primary">下载</el-button>
        </div>
    </div>

</template>

<script lang="ts" setup>
import type { TbFirmFile } from '@/service/firm_file';
import { formatDate, formatSize } from '@/utils/utils';


interface Props {
    firmFile: TbFirmFile,
}

const props = defineProps<Props>();

const emit = defineEmits<{
    delete: [],
    download: []
}>();

function onClickDelete() {
    emit('delete');
}

function onClickDownload() {
    emit('download');
}

</script>
